<template>
  <div>
    <myheader />
    <van-form @submit="reg">
      <van-field
        v-model="form.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="form.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="form.mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写' }]"
      />
      <dragverify
        :width="width"
        :height="height"
        :text="text"
        :circle="true"
        :success-text="successText"
        :background="background"
        id="qiu"
        ref="Verify"
      >
      </dragverify>

      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          style="width: 100px"
          id='button1'
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import dragVerify from "vue-drag-verify";
import myheader from "./myheader.vue";
export default {
  components: { myheader },
  data() {
    return {
      form: {},
      background: "pink",
      text: "请将滑块拖动到右侧",
      successText: "验证成功",
      width: 300,
      height: 50,
    };
  },
  methods: {
    reg() {
      if (this.$refs.Verify.isPassing) {
        this.$axios.post("/users/reg", this.form).then((res) => {
          if (res.data.code == 200) {
            alert("注册成功");
            this.form = {};
          } else {
            alert("注册失败");
          }
        });
      }
      else{
        alert('先验证')
      }
    },
  },
  components: {
    myheader: myheader,
    dragverify: dragVerify,
  },
};
</script>

<style scoped>
</style>